<template>
	<view>
		<u-navbar title-color="#717171" :background="{ backgroundColor: '#ffffff' }" :back-text-style="{color: '#fff'}"
		 :title="$t('index.SendShortVideo')"></u-navbar>
		<view class="small-content">
			<!--  -->
			<video :direction="-90" :autoplay="true" :enable-play-gesture="true" :src="soundSrc.tempFilePath"
			 controls></video>

			<view class="edit-content">
				<view class="butt">
					<textarea class="title" v-model="title" type="text" :placeholder="$t('pressrelease.videoTitle')" />
					<view class="upload">
	<u-upload :max-size="5 * 1024 * 1024" :upload-text="$t('pressrelease.videoCover')" max-count="1" :auto-upload="false" @on-choose-complete="completedata"></u-upload>
					</view>
				</view>
				<!-- 旋转角度 -->
				<view class="sma-rotatin">
					<text>{{$t('pressrelease.Rotation')}}</text>
					<u-radio-group v-model="rotation" @change="radioGroupChange">
								<u-radio 
									v-for="(item, index) in rotationlist" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}
								</u-radio>
					</u-radio-group>
					<u-button @click="jumpMusic" size="mini" type="warn">{{$t('pressrelease.chmusic')}}</u-button>
				</view>
				<!-- 音乐 -->
				<view v-show="current.singer" class="sma-muic">
					 <audio style="text-align: left;" :src="'https://music-asean.oss-cn-hongkong.aliyuncs.com'+current.music_file" :poster="'https://music-asean.oss-cn-hongkong.aliyuncs.com'+current.cover" :name="current.title" :author="current.singer" @timeupdate="timeupdate" controls></audio>
					 <view class="musc-BUM">
					 	<text>{{$t('pressrelease.BGMstarts')}}{{bgmStart}}{{$t('pressrelease.ssss')}}</text><text>{{$t('pressrelease.theOriginal')}}</text><u-switch v-model="removeOST"></u-switch>
					 </view>
				</view>
				<!-- 音量 -->
				<view v-show="current.singer" class="sma-rotatin">
					<text>{{$t('pressrelease.BGMvolume')}}</text>
					<u-radio-group v-model="volume" @change="radioGroupChange">
								<u-radio 
									v-for="(item, index) in volumelist" :key="index" 
									:name="item.name"
									:disabled="item.disabled"
								>
									{{item.name}}{{$t('pressrelease.times')}}
								</u-radio>
					</u-radio-group>
				</view>
				<button @click="submit" type="warn">{{$t('pressrelease.release')}}</button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				volumelist: [
					{
						name: 0.5,
						disabled: false
					},
					{
						name: 1,
						disabled: false
					},
					{
						name: 1.5,
						disabled: false
					},
					{
						name: 2,
						disabled: false
					},
					/* {
						name: 2.5,
						disabled: false
					}, */
					/* {
						name: 3,
						disabled: false
					} */
				],
				rotationlist: [
					{
						name: 0,
						disabled: false
					},
					{
						name: 90,
						disabled: false
					},
					{
						name: 180,
						disabled: false
					},
					{
						name: 270,
						disabled: false
					},
				],
				removeOST: false,//是否去除原声
				bgmStart: 0,//BGM开始时间
				rotation:0,//旋转角度 可选角度：0 90 180 270 360
				volume:0,//背景音乐音量，0.5为0.5倍音量，1为一倍音量，2.5为2.5倍音量…
				imgList:'',//图片
				title:'',//标题
				soundSrc: {}, //视频文件 时长：duration   地址：tempFilePath
				current: {},//音频文件
			};
		},
		onLoad() {
			this.test()
			uni.removeStorageSync("chmusicid");
		},
		onShow() {
			//获取音乐
			if(uni.getStorageSync("chmusicid")){
				let urlMUSY='/category/get-music/'+uni.getStorageSync("chmusicid")
				this.$myRequest({
					url: urlMUSY,
					header: {},
					data: {}
				}).then(res=>{
					this.current=res.data
				})
			}
		},
		methods: {
			//监听音乐时间
			timeupdate(e){
				this.bgmStart=Math.floor(e.detail.currentTime)
			},
			//跳转音乐界面
			jumpMusic(){
				uni.navigateTo({
					url: `/pages/choosemusic/choosemusic`
				});
			},
			//监听旋转角度
			radioGroupChange(e){
				console.log(e)
			},
			//发布
			async submit() {
				uni.showLoading();
				let data = {}
				let formData=[]
				let URL_sil={
					name:'video',
					uri:this.soundSrc.tempFilePath
				}
				if(this.imgList.uri){
					formData.push(this.imgList)
					data.frame = -1
				}else{
					data.frame = 1
				}
				formData.push(URL_sil)
				data.title = this.title
				data.bgmStart = this.bgmStart
				data.duration = Math.ceil(this.soundSrc.duration)
				uni.getStorageSync("chmusicid")?data.musicId=uni.getStorageSync("chmusicid"):data.musicId=-1
				this.removeOST?data.removeOST=1:data.removeOST=0
				data.rotation = this.rotation
				data.volume = this.volume
				console.log(data)
				console.log(formData)
				const res = await this.$myUploadFile({
					url: '/dmh/add-video-mini',
					header: {},
					formData: data,
					files: formData
				}) 
				console.log(res)
				if (res.code == 200) {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.successfully,
						type: 'success'
					})
					uni.hideLoading();
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1000)
			
				} else {
					this.$refs.uToast.show({
						title: this.$i18n.messages[this.$i18n.locale].pressrelease.failed,
						type: 'error'
					})
				}
			},
			//调用手机摄像头
			test() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['album'],
					maxDuration: '45', 
					success: function(res) {
						console.log(res)
						self.soundSrc = res;
					},
					complete: function(comp) {
						if(comp.tempFilePath==''){
							uni.navigateBack()
						}
					},
				});
			},
			//监听图片列表
			completedata(e) {
				var ss = {}
				const users = e.map(item => (ss.uri = item.url, ss.name = 'cover', ss));
				this.imgList = users[0]
			},
		}
	}
</script>

<style lang="scss">
	/* BGM */
	.musc-BUM {
		margin-top: 20rpx;
		font-size: 35rpx;
	
		text {
			margin: 20rpx 30rpx 20rpx 0;
		}
	}
	/* 角度 */
	.sma-rotatin{
		text{
			margin: 0 20rpx;
			font-size: 35rpx;
		}
	}
	.sma-muic{
		margin-bottom: 30rpx;
	}
	/*  */
	.small-content {
		video {
			width: 100%;
			height: 400rpx;
		}

		button {
			width: 80%;
			margin: 50rpx auto;
		}
	}

	.edit-content {
		padding: 20rpx;
		.butt {
			display: flex;
		.upload {
			flex: 1;
		}
			textarea {
				flex: 3;
				margin: 10rpx;
				padding-left: 15rpx;
				height: 200rpx;
				line-height: 50rpx;
			}

			.title {
				background-color: #eaf5ff;
				/* border: 1rpx solid #212121; */
				border-radius: 5px;
			}

			.choose {
				border-bottom: 1rpx solid #212121;
			}

			.edit-info {
				display: flex;
				justify-content: space-between;
				padding: 25rpx 20rpx;
				color: #b9b9b9;
				font-size: 25rpx;
				line-height: 35rpx;

				.title {
					color: #9a9a9a;
					font-size: 35rpx;
				}

				.icon {
					margin-left: 10rpx;
					color: #b9b9b9;
				}
			}
		}

		button {
			width: 95%;
			margin: 20rpx auto;
		}
	}
</style>
